<template>
    <div id="map" style="width: 600px; height: 400px"></div>
</template>
  
  <script>
    import L from "leaflet";

    export default {
        name: "LeafletMap",
        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                // 初始化地图，但不添加任何瓦片层
                const map = L.map("map").setView([0, 0], 2); // 设置视图为中心点和缩放级别，这里只是示例

                // 你可以选择添加其他地图控件或元素，比如缩放控件（通常默认已经添加）
                // L.control.zoom().addTo(map); // 缩放控件通常默认已经添加到地图中，所以这一行是可选的

                // 注意：没有添加L.tileLayer()来加载地图瓦片，所以地图将显示为一个空白的容器
            }
        }
    };
</script>
  
  <style scoped>
    #map {
        /* 确保地图容器有一个可见的大小 */
        width: 100%;
        height: 100%; /* 或者你需要的任何其他高度 */
    }
</style>